<template>
  <view class="container">
    <view class="bgColor"></view>
    <uv-navbar title="推广管理" bgColor="rgba(0,0,0,0)" leftIconSize="0" :title-style="{'color':'#fff'}" placeholder>
    </uv-navbar>
    <view class="main" style="position: relative;z-index: 1;padding: 0 30rpx;box-sizing: border-box;">
      <view class="qianbao">
        <view class="qianbao-tp">
          <view class="label">
            我的钱包
          </view>
          <view class="btn" @click="toTixian">
            去提现
          </view>
        </view>
        <view class="shouyi">
          <view class="shouyi-item" v-for="(item, index) in shouyiList" :key="index">
            <view class="shouyi-item-value">{{item.value}}</view>
            <view class="shouyi-item-label">{{item.label}}</view>
          </view>
        </view>
      </view>
      <view class="shouyi2" style="margin-top: 30rpx;">
        <view class="shouyi-item" v-for="(item, index) in shouyi2List" :key="index">
          <view class="shouyi-item-value">{{item.value}}</view>
          <view class="shouyi-item-label">{{item.label}}</view>
        </view>
      </view>
      <!-- 其他服务 -->
      <view class="block">
        <!--        <view class="block-title">
          其他服务
        </view> -->
        <view class="block-warpper">
          <view class="block-warpper-item" v-for="(item, index) in qitaList" :key="index">
            <image class="block-warpper-item-icon" :src="item.url" mode=""></image>
            <view class="block-warpper-item-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        qitaList: [{
            url: "/static/images/qita1.png",
            label: "推广订单"
          },
          {
            url: "/static/images/dianpu.png",
            label: "我的店铺会员"
          }
        ],
        shouyiList: [{
            label: "可提现(元)",
            value: "0.00"
          },
          {
            label: "待到账(元)",
            value: "0.00"
          },
          {
            label: "累计到账(元)",
            value: "0.00"
          },

        ],
        shouyi2List: [{
            label: "店铺会员(元)",
            value: "0.00"
          },
          {
            label: "今日收益(元)",
            value: "0.00"
          },
          {
            label: "累计收益(元)",
            value: "0.00"
          },
        ]
      }
    },
    methods: {
      toTixian(){
        uni.navigateTo({
          url: "/pages/mine/tixian"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .qianbao {
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(234, 117, 40, 0.1);
    border-radius: 30rpx;
    background: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
    .qianbao-tp {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 116rpx;

      border-bottom: 2rpx solid #eee;
      .label {
        font-weight: bold;
        font-size: 24rpx;
        color: #000;
  
      }

      .btn {
        width: 112rpx;
        height: 46rpx;
        background: linear-gradient(270deg, #FF3C21 0%, #EA7222 100%);
        border-radius: 74rpx;
        font-weight: bold;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 46rpx;
      }
    }

    .shouyi {
      display: flex;
      padding: 40rpx 78rpx;
      box-sizing: border-box;
      justify-content: space-between;

      .shouyi-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .shouyi-item-value {
          font-weight: bold;
          font-size: 36rpx;
          color: #333333;
        }

        .shouyi-item-label {
          font-weight: 400;
          font-size: 20rpx;
          color: #666666;
          margin-top: 10rpx;
        }
      }
    }
  }

  .shouyi2 {
    display: flex;
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(234, 117, 40, 0.1);
    border-radius: 30rpx;
    background: #fff;
    padding: 40rpx 78rpx;
    box-sizing: border-box;
    justify-content: space-between;

    .shouyi-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .shouyi-item-value {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
      }

      .shouyi-item-label {
        font-weight: 400;
        font-size: 20rpx;
        color: #666666;
        margin-top: 10rpx;
      }
    }
  }

  .container {
    position: relative;

    .bgColor {
      width: 100vw;
      height: 884rpx;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(180deg, #FF3C21 0%, rgba(234, 214, 34, 0) 100%);
    }

    .block {
      box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(234, 117, 40, 0.1);
      border-radius: 30rpx;
      background: #fff;
      margin-top: 30rpx;

      .block-title {
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
        padding: 30rpx;
        box-sizing: border-box;
      }

      .block-warpper {
        display: flex;
        flex-wrap: wrap;
        padding-top: 30rpx;
        box-sizing: border-box;

        .block-warpper-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 40rpx;
          box-sizing: border-box;
          margin-bottom: 40rpx;

          .block-warpper-item-icon {
            width: 52rpx;
            height: 52rpx;
          }

          .block-warpper-item-label {
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            margin-top: 16rpx;
          }
        }
      }
    }
  }
</style>